<template>
    <div>
        <k-form :model="form" :rules="rules" ref="formRef">
            <k-form-item label="姓名：" prop="value">
                <k-input v-model="form.value" placeholder="请输入用户名"></k-input>
            </k-form-item>
            <k-form-item label="密码：" prop="password">
                <k-input v-model="form.password"></k-input>
            </k-form-item>
            <k-form-item>
               <button @click="submit">提交</button>
            </k-form-item>
        </k-form>
    </div>
</template>

<script>
    import KInput from "../components/KForm/KInput";
    import KForm from "../components/KForm/KForm";
    import KFormItem from "../components/KForm/KFormItem";

    export default {
        components: {KFormItem, KForm, KInput},
        data() {
            return {
                form: {
                    value: "tom",
                    password: ""
                },
                rules: {
                    value: [{required: true, message: "用户名不能为空"}],
                    password: [{required: true, message: "密码不能为空"}]
                }
            }
        },
        methods:{
            submit(){ 
                this.$refs.formRef.validate((isTrue) => {
                    if(isTrue){
                        console.log("成功提交")
                    }else{
                        this.$notice({
                            title: "提交失败",
                            text: "必填项未填写"
                        })
                    }
                })
            }
        }
    }
</script>

<style>

</style>
